<template>
    <div class="info">
        <Scroll class="content">
            <div class="shop-info-wrapper">
                <div class="shop-info">
                  <div class="info-delivery">
                    <h3 class="delivery-title">配送信息</h3>
                    <p class="delivery-detail">
                      <span>{{ info.description }}</span>
                      <span
                        >由商家配送提供配送，约{{ info.deliveryTime }}分钟到达，距离{{
                          info.distance
                        }}</span
                      >
                    </p>
                    <p class="delivery-cost">配送费￥{{ info.deliveryPrice }}</p>
                  </div>
                  <div class="info-service">
                    <h3 class="service-title">活动和服务</h3>
                    <div class="service-detail">
                      <ul class="detail-list">
                        <li
                          class="list-item"
                          v-for="(item, index) in info.supports"
                          :key="index"
                        >
                          <span
                            class="item-left"
                            :style="{ backgroundColor: discountColor[item.type] }"
                            >{{ item.name }}</span
                          >
                          <span class="item-right">{{ item.content }}</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="info-pic">
                    <h3 class="pic-title">商家实景</h3>
                    <div class="pic-list-wrapper">
                      <ul class="pic-list" ref="pic">
                        <li
                          class="list-item"
                          v-for="(pic, index) in info.pics"
                          :key="index"
                        >
                          <img width="120" height="90" :src="pic" />
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="info-shop">
                    <h3 class="shop-title">商家信息</h3>
                    <p class="shop-category">
                      <span class="title">品类</span>
                      <span class="content">{{ info.category }}</span>
                    </p>
                    <p class="shop-contact">
                      <span class="title">商家电话</span>
                      <span class="content">{{ info.phone }}</span>
                    </p>
                    <p class="shop-address">
                      <span class="title">地址</span>
                      <span class="content">{{ info.address }}</span>
                    </p>
                    <p class="shop-time">
                      <span class="title">营业时间</span>
                      <span class="content">{{ info.workTime }}</span>
                    </p>
                  </div>
                </div>
            </div>
        </Scroll>
        
    </div>
</template>

<script>
import Scroll from 'components/common/Scroll/Scroll'
import {mapState} from 'vuex'
export default {
    components: {
        Scroll
    },
    data () {
        return {
            discountColor: ['orange', 'red', 'yellowgreen']
        }
    },
    computed: {
        ...mapState({
            info:state=>state.shop.info
    })

    }
}
</script>

<style lang="less" scoped>
.info{
    height: 100vh;
}
.content{
    overflow: hidden;
    background-color: white;
    height:calc(100% - 194px) ;
}
.shop-info{
    .info-delivery{
        margin-bottom: 20px;
    }
    .info-service{
        margin-bottom: 20px;
    }
    .info-pic{
        margin-bottom: 20px;
        .pic-list{
            display: flex;
            .list-item{
                margin: 5px;
                flex: 1;
            }
        }
    }
    .info-shop{
    }
}

</style>

